<template>
	<view>
		<u-swiper height="375" bottom :list="swiperImages"  indicator indicatorMode="line" circular
			indicatorActiveColor="#2393FF" indicatorInactiveColor="#FFFFFF"></u-swiper>
		<view class="product-info">
			<view class="top">
				<view class="">
					<view class="name">{{ goodsDetail.goodsName }}</view>
					<view class="oldMoney">原价:¥{{ goodsDetail.msqGoodsAttrValueList?goodsDetail.msqGoodsAttrValueList[0].price:'' }}</view>
				</view>
				<view class="num">已售:{{ goodsDetail.sellSum }}</view>
			</view>
			<view class="priceBox">
				<view class=" flex">限时特价
					<view class="price"> 
						<text class="moneyIcon">¥</text> {{ goodsDetail.msqGoodsAttrValueList?goodsDetail.msqGoodsAttrValueList[0].price:'' }}
					</view>
				</view>
			</view>
			<view class="flex-between " style="margin-top: 24rpx;">
				<view class="tip">购买数量</view>
				<u-number-box integer v-model="buyCount"></u-number-box>
			</view>
			
		</view>

		<!-- <view class="inform">
			<p class="title">购买须知</p>
			<view class="informContent">
				<p class="left">使用流程</p>
				<p class="right">购买商品 - 预约成功 - 到店出示手机</p>
			</view>
			<view class="informContent">
				<p class="left">有效时间</p>
				<p class="right">选择购买的日期当天内有效</p>
			</view>
			<view class="informContent">
				<p class="left">使用时间</p>
				<p class="right">00:00:00 - 00:00:00可用</p>
			</view>
		</view> -->

		<!-- <view class="specificationsBox" @click="openPopup">
			<view class="leftText">
				请选择规格
			</view>
			<view class="rightIcon">
				<text class="iconfont icon-xiangyou"></text>
			</view>
		</view> -->
		<view class="inform" style="padding-bottom: 200rpx;">
			<p class="title">
				<image class="icon mr24" src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shangpinxiangqing.png" mode=""></image>
				商品详情
				<image class="icon ml24" src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shangpinxiangqing.png" mode=""></image>
			</p>
			<mp-html :selectable="true" :content="goodsDetail.blurb" />
		</view>

		<!-- 底部的导航栏 -->
		<view class="fixed-bottom" v-if="!isPopupOpen">
			<button class="btn" @click="onButtonClick">立即购买</button>
			<!-- <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="onButtonClick" /> -->
		</view>

		<!-- 规格弹窗 -->
		<uni-popup ref="popup" :before-close="true" type="bottom" style="padding-bottom:0" @open="onPopupOpen"
			@close="onPopupClose">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title"></text>
					<text class="popup-close" @click="closePopup">×</text>
				</view>
				<view class="popup-body">
					<view class="popup-product-info">
						<image :src="goodsDetail.picture" class="popup-product-image" mode="aspectFill"></image>
						<view class="popup-product-details">
							<p class="popup-name">{{ goodsDetail.goodsName }}</p>
							<p class="popup-price">¥{{ selectedSpec.price }}</p>
						</view>
					</view>
					<view class="popup-specs">
						<text class="popup-spec-label">规格</text>
						<view class="spec-buttons">
							<button v-for="(spec, index) in goodsDetail.msqGoodsAttrValueList" :key="index"
								:class="{ 'selected': specificationId === spec.id }" @click="selectSpec(spec)">
								{{ spec.sku }}
							</button>
						</view>
					</view>
					<view class="quantity-control">
						<button @click="decreaseQuantity" :disabled="buyCount <= 1">-</button>
						<input type="number" disabled v-model="buyCount" min="1" readonly />
						<button @click="increaseQuantity">+</button>
					</view>

					<view class="orderDetail" v-if="orderDetail">
						<view class="orderDetailLi">
							<p class="left">商品金额</p>
							<p class="right">￥{{ totalPrice }}</p>
						</view>
						<view class="orderDetailLi">
							<p class="left">订单运费</p>
							<p class="right">￥0</p>
						</view>
						<view class="orderDetailLi" @click="openPopupList" v-if="couponsList.length > 1">
							<p class="left">优惠券</p>
							<p class="right">-￥{{ selectedCouponAmount }}
								<view class="iconfont icon-xiangyou"></view>
							</p>
						</view>
					</view>
				</view>
				<button @click="confirmAction" class="popup-footer-Button" v-if="isPopupOpen"
					:style="{ backgroundColor: orderDetail ? '#085CD6' : '#085CD6', color: '#fff' }">
					{{ orderDetail ? '立即购买' : '加入购物车' }}
				</button>
			</view>
		</uni-popup>

		<!-- 优惠券列表弹窗 -->
		<uni-popup ref="popup02" type="bottom">
			<view class='coupon-list' v-if="couponsList.length">
				<view class='item acea-row row-center-wrapper' v-for='(item, index) in couponsList' :key="index">
					<view class="couponsBox">
						<image class="couponsLeft" :src="item.couponPicture" mode="" />
						<view class="contentBox">
							<view class="title">{{ item.couponName }}</view>
							<view class="lable">{{ item.couponType }}</view>
							<p class="time">有效期至{{ item.effectiveTime }}</p>
						</view>
						<view class="couponsRight">
							<p class="price"><text style="font-size: 38rpx;">￥</text><text
									style="font-size: 28rpx;">{{ item.money }}</text></p>
							<p class="profile">店铺商品立减</p>
							<view class="button" @click="selectCoupon(item)">立即使用</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 支付方式选择弹窗 -->
		<uni-popup ref="paymentMethodPopup" type="bottom">
			<view class="payment-methods">
				<view class="method" @click="choosePaymentMethod(0)">
					<text>微信支付</text>
				</view>
				<view class="method" @click="choosePaymentMethod(1)">
					<text>余额支付</text>
				</view>
				<view class="method" @click="choosePaymentMethod(-1)">
					<text>取消支付</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getProductDetail,
		postCartAdd
	} from '@/api/store.js';
	import {
		postAvailableCoupon,
		postCreateOrder
	} from '@/api/order.js';
	import {
		getUserInfo,
		getSilent02
	} from '@/api/user.js';
	export default {
		components: {},
		data() {
			return {
				swiperImages:[],
				options: [{
					icon: 'shop',
					text: '客服'
				}],
				buttonGroup: [{
					text: '立即购买',
					backgroundColor: '#085CD6',
					color: '#fff'
				}],
				goodsId: '',
				goodsDetail: {},
				specificationId: '',
				buyCount: 1,
				payParams: [],
				yhqId: null,
				orderDetail: false,
				couponsList: [],
				isPopupOpen: false,
				selectedSpec: {},
				selectedCouponAmount: 0,
				totalPrice: '0.00',
				payType: '',
				goodsTypeId: ''
			};
		},
		onLoad(options) {
			this.goodsId = options.id;
			console.log(this.goodsId, "this.goodsId")
		},
		mounted() {
			this.getGoodsDetails();
		},
		methods: {
			getCoupon() {
				let orderMoney = this.selectedSpec.price * this.buyCount;
				let data = {
					commodityId: this.goodsDetail.id,
					orderMoney: orderMoney
				};
				console.log(data, "data")
				postAvailableCoupon(data).then(res => {
					this.couponsList = res.data.records;
					console.log(this.couponsList, "优惠券列表");
				});
			},
			openPopupList() {
				this.$refs.popup02.open();
			},
			getGoodsDetails() {
				getProductDetail(this.goodsId).then(res => {
					this.goodsDetail = res.data;
					this.goodsTypeId = res.data.goodsTypeId;
					this.goodsDetail.blurb = res.data.blurb&&res.data.blurb.replace(/\<img/g,
						'<img style="max-width:100%;height:auto"');
					this.selectedSpec = res.data.msqGoodsAttrValueList[0];
					if(res.data.yiXingGoodsPictureList.length>0){
						 res.data.yiXingGoodsPictureList.map((item,index)=>{
							 if(index>0){
								 this.swiperImages.push(item.pictureUrl)
							 }
							 
						 })
					}else{
						this.swiperImages = [res.data.picture]
					}
					
				});
			},
			onClick(e) {
				if (e.content.text == '购物车') {
					uni.navigateTo({
						url: '/pages/order_addcart/order_addcart',
					});
				}
			},
			selectSpec(spec) {
				this.specificationId = spec.id;
				this.selectedSpec = spec;
				this.totalPrice = (this.selectedSpec.price * this.buyCount).toFixed(2)
				if (this.orderDetail) {
					this.getCoupon();
				}
			},
			decreaseQuantity() {
				if (this.buyCount > 1) {
					this.buyCount--;
					this.totalPrice = (this.selectedSpec.price * this.buyCount).toFixed(2)
					if (this.orderDetail) {
						this.getCoupon();
					}
				}
			},
			increaseQuantity() {
				this.buyCount++;
				this.totalPrice = (this.selectedSpec.price * this.buyCount).toFixed(2)
				if (this.orderDetail) {
					this.getCoupon();
				}
			},
			selectCoupon(coupon) {
				this.yhqId = coupon.id
				this.selectedCouponAmount = coupon.money;
				this.closePopupList();
			},
			openPopupList() {
				this.$refs.popup02.open();
			},
			closePopupList() {
				this.$refs.popup02.close();
			},
			onButtonClick(e) {
				uni.navigateTo({
					url: "/pages/users/wechat_login/index"
				})
				if (uni.getStorageSync('LOGIN_STATUS_TOKEN')) {
					// this.orderDetail = e.content.text === '立即购买';
					if (this.goodsDetail.msqGoodsAttrValueList.length == 1) {
						this.selectSpec(this.goodsDetail.msqGoodsAttrValueList[0])
						this.specificationId = this.goodsDetail.msqGoodsAttrValueList[0].id
					}
					uni.navigateTo({
						url: '/pages/addOrder/index?specificationId=' + this.specificationId + '&buyCount=' + this
							.buyCount + '&totalPrice=' + this.totalPrice + '&yhqId=' + this.yhqId +
							'&goodsTypeId=' + this.goodsTypeId +
							'&goodsInfo=' + encodeURIComponent(JSON.stringify(this.goodsDetail))
					});
					// this.isPopupOpen = true; // 打开规格弹窗时隐藏uni-goods-nav
					// this.openPopup();
				} else {
					uni.navigateTo({
						url: '/pages/users/wechat_login/index'
					})
				}
			},
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
				this.onPopupClose();
			},
			onPopupOpen() {
				this.isPopupOpen = true; // 规格弹窗打开时隐藏uni-goods-nav
			},
			onPopupClose() {
				this.isPopupOpen = false; // 规格弹窗关闭时显示uni-goods-nav
			},
			confirmAction() {
				if (!uni.getStorageSync('LOGIN_STATUS_TOKEN')) {
					uni.navigateTo({
						url: '/pages/users/wechat_login/index'
					})
				}
				if (!this.specificationId) {
					this.$util.Tips({
						title: "请选择商品规格"
					});
					return;
				}
				const action = this.orderDetail ? '立即购买' : '加入购物车';
				const payload = {
					specificationId: this.specificationId,
					buyCount: this.buyCount,
					goodsNum: this.buyCount
				};

				if (action === '加入购物车') {
					this.onPopupClose();
					this.$refs.popup.close()
					postCartAdd(payload).then(res => {
						this.$util.Tips({
							title: "添加成功"
						});

					});
				} else if (action === '立即购买') {
					// this.$refs.popup.close()
					uni.navigateTo({
						url: '/pages/addOrder/index?specificationId=' + this.specificationId + '&buyCount=' + this
							.buyCount + '&totalPrice=' + this.totalPrice + '&yhqId=' + this.yhqId +
							'&goodsTypeId=' + this.goodsTypeId
					});
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.payment-methods {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 20rpx;
		background-color: #fff;
		padding-bottom: 70rpx;

		.method {
			padding: 20rpx;
			text-align: center;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border-bottom: none;
			}
		}
	}

	/deep/.vue-ref {
		bottom: 0 !important;
		padding-bottom: 0 !important;
		margin-bottom: -10rpx;
	}

	.content-container {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.content-container img {
		max-width: 100% !important;
		height: auto;
		display: block;
	}

	[v-html] img {
		max-width: 100% !important;
		height: auto;
		display: block;
	}

	.orderDetail {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 100rpx 0 20rpx 0;
		padding: 32rpx 24rpx 0rpx 24rpx;

		.orderDetailLi {
			display: flex;
			justify-content: center;
			flex-wrap: nowrap;
		}

		.left {
			width: 70%;
			text-align: left;
			margin-bottom: 20rpx;
		}

		.right {
			width: 30%;
			text-align: right;
			padding-right: 20rpx;
		}

		.iconfont {
			float: right;
			margin-right: -30rpx;
		}
	}



	.swiper {
		// min-height: 200px;
		height: 400rpx;
	}

	.product-info {
		background-color: #fff;
		padding: 20rpx 32rpx 24rpx;
		border-radius: 12rpx;
		.top{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.oldMoney{
			font-size: 24rpx;
			color: #D2D2D2;
			text-decoration: line-through;
			margin-top: 10rpx;
		}
	}

	.product-info .price {
		color: #F9423A;
		font-size: 40rpx;
		font-weight: 700;
		// font-family:'DIN';
		padding-left: 10rpx;
	}
	.product-info .moneyIcon {
		color: #F9423A;
		font-size: 24rpx;
		font-weight: 700;
		// font-family:'DIN';
	}

	.product-info .num {
		font-size: 24rpx;
		color: #D2D2D2;
	}

	.product-info .name {
		font-weight: 700;
		font-size: 32rpx;
		color: #28314C;
	}

	.specificationsBox {
		width: 100vw;
		background-color: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 20rpx 0rpx;
	}

	.specificationsBox .leftText {
		width: 80%;
	}

	.specificationsBox .rightIcon {
		width: 20%;
		height: 40rpx;
		display: block;
		text-align: right;
	}

	.popup-content {
		height: 1100rpx;
		background: #F5F5F5;
		padding: 0px 10px;
		border-radius: 10px;
		text-align: center;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.popup-title {
		font-size: 16px;
	}

	.popup-close {
		font-size: 24px;
		cursor: pointer;
	}

	.popup-body {
		margin-bottom: 20px;
		text-align: left;
	}

	.popup-product-info {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.popup-product-image {
		width: 220px;
		height: 100px;
		margin-right: 20px;
		border-radius: 10px;
	}

	.popup-product-details {
		flex: 1;
	}

	.popup-name {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.popup-price {
		font-size: 14px;
		margin-bottom: 10px;
		color: red;
	}

	.popup-specs {
		text-align: left;
		background-color: #fff;
		padding: 10px;
		border-radius: 10px;
	}

	.popup-spec-label {
		width: 100%;
		font-size: 16px;
		margin-bottom: 10px;
		text-align: left;
		font-weight: 600;
		color: #085CD6;
		line-height: 38px;
	}

	.spec-buttons {
		display: flex;
		flex-wrap: wrap;
	}

	.spec-buttons button {
		margin: 5px;
		padding: 10px;
		font-size: 14px;
		background-color: #f0f0f0;
		border-radius: 5px;
		cursor: pointer;
	}

	.spec-buttons button.selected {
		background: f3f3f3;
		color: #085CD6;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		margin-top: 10px;
		float: right;
	}

	.quantity-label {
		margin-right: 10px;
	}

	.quantity-control button {
		width: 30px;
		height: 30px;
		border: 1px solid #ccc;
		background-color: #fff;
		cursor: pointer;
	}

	.quantity-control input {
		width: 50px;
		height: 30px;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.inform {
		min-height: 245rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 20rpx 0;
		padding: 32rpx 24rpx 0rpx 24rpx;
	}

	.inform .title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 40rpx;
		color: #0A0A13;
		margin-bottom: 40rpx;
	}

	.inform .informContent {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.inform .left {
		width: 80rpx;
		height: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #848484;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		margin: 10rpx 10rpx 10rpx 0rpx;
	}

	.inform .right {
		height: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #000000;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		margin-left: 10rpx;
		margin: 10rpx 0rpx 10rpx 0rpx;
	}


	.popup-footer-Button {
		width: 686rpx;
		height: 90rpx;
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		display: block;
		margin: 140rpx 20rpx 20rpx 20rpx;
	}

	.fixed-bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: white;
		padding: 20rpx 32rpx 50rpx;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		.btn{
			height: 86rpx;
			line-height: 86rpx;
			background: #0077FF;
			border-radius: 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.couponsBox {
		width: 702rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;

		.couponsLeft {
			width: 130rpx;
			height: 130rpx;
			margin: 30rpx 20rpx;
		}

		.contentBox {
			width: 336rpx;
			height: 130rpx;
			margin: 30rpx 0rpx;

			.title {
				width: 336rpx;
				height: 70rpx;
				font-weight: 600;
				font-size: 26rpx;
				color: #000000;
				line-height: 32rpx;
				text-align: left;
			}

			.lable {
				max-width: 144rpx;
				height: 29rpx;
				text-align: center;
				line-height: 29rpx;
				background-color: #11041A;
				border-radius: 29rpx;
				color: #fff;
				font-size: 22rpx;
			}

			.time {
				font-weight: 400;
				font-size: 16rpx;
				color: #666666;
				line-height: 22rpx;
				text-align: left;
				margin-top: 10rpx;
			}
		}

		.couponsRight {
			width: 190rpx;
			height: 190rpx;
			background-image: url('../../static/myImages/couponsRight.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 10rpx 29rpx;

			.price {
				color: #FAD174;
				text-align: center;
			}

			.profile {
				height: 28rpx;
				font-weight: 600;
				font-size: 20rpx;
				color: #FAD174;
				text-align: center;
			}

			.button {
				width: 112rpx;
				height: 40rpx;
				background: #FAD174;
				border-radius: 24rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #11041A;
				line-height: 40rpx;
				text-align: center;
				margin: auto;
				margin-top: 10rpx;
			}
		}
	}

	.coupon-list {
		height: 1100rpx;
		background-color: #fff;
		padding: 0px 10px;
		border-radius: 10px;
		text-align: center;
	}

	.coupon-list .item {
		margin-bottom: 46rpx;
		padding: 20rpx 0rpx;
	}
	.tip{
		font-weight: 400;
		font-size: 24rpx;
		color: #28314C;
		padding-right: 10rpx;
	}
	.coupon{
		width: 178rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: rgba(255,70,100,0.2392);
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #FF5144;
		text-align: center;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.flex-between{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.priceBox{
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid rgba(0,0,0,0.0784);
		font-weight: 500;
		font-size: 24rpx;
		color: #28314C;
	}
	.icon{
		width: 34rpx;
		height: 41rpx;
	}
	.mr24{
		margin-right: 24rpx;
	}
	.ml24{
		margin-left: 24rpx;
	}
</style>